import React from 'react';
import {connect} from 'react-redux';
import {fetchList,addToCart,totalPay} from './../action/product';
import {NavLink} from './NavLink';
class ProductPage extends React.Component{
    componentWillMount(){
        this.props.fetchList();
        
    }
    changePage(e){
        var page=e.currentTarget.getAttribute('data-page');
        var params= {page:parseInt(page),limit:8};
		this.props.fetchList(params);
	}
    addCart(e){
		const idx=parseInt(e.currentTarget.getAttribute('data-idx'));//点击当前商品获取ID
        const addToCartProduct=this.props.lists.rows[idx];//将当前取得ID传给购物车商品（变量）
        this.props.addToCart(addToCartProduct);//调用，将当前变量（商品ID）传给购物车
        this.props.totalPay();//调用totalpay
    }
    seeDetail(e){
        
    }
    render(){
       console.log(this.props)
        const {lists,fetchList,addToCart} = this.props;
        if(!lists.rows){
            return <li>数据加载中...</li>
        }
        var output= [];//商品列表
        var pages = 1;
        var outputPages=[];
        
        pages=lists.pages;
       // console.log(pages)
    
		for(let i=1;i<=pages;i++){
            //分页机制
			outputPages.push(
				<li key={i}>
			        <a href="javascript:void(0)" data-page={i} onClick={(e)=>this.changePage(e)}>{i}
			        	<span className="sr-only"></span>
			        </a>
			    </li>
			)
		}
        var ls=lists.rows;
        for(let i=0;i<lists.rows.length;i++){
            //商品列表机制
            output.push(          
                <div className="col-lg-3 col-xs-6 col-md-3" key={i}>
                    <img className="img-square" src={ls[i].picurl} alt="" width="180" height="180"/>
                    <h2>{ls[i].productname}</h2>
                    <p>现价：{ls[i].unitprice}元</p>
                    <p>
                      <a className="btn btn-danger" to={'/ProductDetail/'+ls[i]._id} href="javascript:void(0)" role="button"
                       onClick={(e)=>this.seeDetail(e)}>查看详情</a>&nbsp;
                      {/* <NavLink className="btn btn-danger" to={'/ProductDetail/'+ls[i]._id} role="button" >查看详情</NavLink>&nbsp;*/}
                        <a className="btn btn-primary" href="javascript:void(0)" role="button"
                         data-idx={i} onClick={(e)=>this.addCart(e)}>加入购物车</a>
                    </p>
                </div>             
            )
        }

        return(
            <div>
                <nav aria-label="..."><ul className="pagination"></ul></nav>
                <div className="container marketing">
                    <div className="row">
                    {output}
                    </div>
                </div>
                <br/>
				<nav aria-label="...">
                    <ul className="pagination">
                        {outputPages}
                    </ul>
                </nav>
                
            </div>
        )
    }
}

const getValue = (state)=>{
   // console.log(state)
    return {  
        lists:state.product.lists
    }
}
const Product = connect(getValue , {fetchList,addToCart,totalPay})(ProductPage);

export default Product;




